import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';
import TodoItem from './TodoItem';

export default function TodoContainer() {
    // const [todoList, setTodo] = useState([{
    //     id:1,
    //     title:"完成工作",
    //     complete:false
    // },{
    //     id:2,
    //     title:"学习",
    //     complete:false
    // },{
    //     id:3,
    //     title:"锻炼",
    //     complete:false
    // }])

    // function handleComplete(todo) {
    //     const newList = todoList.map(t => {
    //         if(t.id === todo.id) {
    //             return {...t, complete:!t.complete};
    //         }
    //         return t;
    //     });
    //     setTodo(newList);
    // }

    // function handleclick(id) {
    //     const newList = todoList.filter(td => td.id !== id)
    //     setTodo(newList)
    // }

    // return (
    //     <div className="App-header">
    //         <img src={logo} className="App-logo" alt="logo" />
    //             <p>
    //                 Edit <code>src/App.js</code> and save to reload.
    //             </p>
    //             <a
    //                 className="App-link"
    //                 href="https://reactjs.org"
    //                 target="_blank"
    //                 rel="noopener noreferrer"
    //             >
    //             learn react
    //             </a>
    //         <div style={{marginTop: 20 }}>
    //             <ul style={{textAlign:'left'}}>
    //             {
    //             todoList.map(todo => (
    //                 <li key={todo.id}>
    //                     <input type="checkbox" checked={todo.complete} onChange={(ev) => {
    //                         handleComplete(todo)
    //                     }} />
    //                     {todo.title}：{todo.complete? '已完成':'未完成'}
    //                     <button style={{ marginLeft: 20 }} onClick={() => {
    //                         handleclick(todo.id)
    //                     }} >删除</button>
    //                 </li>
    //             ))
    //             }
    //         </ul>
    //     </div>
    //     </div>
        
    // );

    const [type, setType] = useState(0);

    return (
            <div className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                    <p>
                        Edit <code>src/App.js</code> and save to reload.
                    </p>
                    <a
                        className="App-link"
                        href="https://reactjs.org"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                    learn react
                    </a>
                <TodoItem type={0} />
            </div>
            
        );
}